$selectedColor: #f3f9ff;
$lighterBlue: #409eff;

.questionmain {
  height: 100%;
  overflow: hidden;
  background: #ebeef5;
  padding: 10px;
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
}

.left-board {
  height: 100%;
  width: 250px;
  position: absolute;
  background: #fff;
  left: 0;
  top: 0;
  border-radius: 4px;
  overflow: hidden;
  padding: 0 24px;

  .left-header {
    position: relative;
    height: 42px;
    text-align: left;
    padding: 0 15px;
    box-sizing: border-box;
    // border-bottom: 1px solid #dcdfe6;

    .title-txt {
      font-size: 16px;
      float: left;
      padding: 13px 0;

      &::before {
        content: " ";
        width: 4px;
        height: 16px;
        background: #409eff;
        position: absolute;
        left: 0;
        right: 0;
        top: 13px;
        z-index: 2;
      }
    }

    .left-header-right {
      position: absolute;
      right: 15px;
      top: 0;
      display: flex;
      align-items: center;
      height: 42px;
    }
  }

  .left-box {
    position: relative;
    width: 100%;
    height: calc(100% - 42px);
    box-sizing: border-box;
    overflow: hidden;
  }

  .el-scrollbar {
    height: 100%;
    overflow: hidden;

    .el-scrollbar__wrap {
      overflow-x: auto;
    }

    .el-scrollbar__view {
      overflow-x: hidden;
    }
  }
}

.center-board {
  height: 100%;
  width: auto;
  margin: 0 350px 0 260px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 4px;
  // overflow: hidden;
  overflow: scroll;
  padding: 0 24px;

  .center-header {
    position: relative;
    height: 42px;
    text-align: center;
    padding: 0 15px;
    box-sizing: border-box;
    // border-bottom: 1px solid #dcdfe6;

    .title-txt {
      font-size: 16px;
      float: left;
      padding: 13px 0;

      &::before {
        content: " ";
        width: 4px;
        height: 14px;
        background: #409eff;
        position: absolute;
        left: 0;
        right: 0;
        top: 13px;
        z-index: 2;
      }
    }

    .delete-btn {
      color: #f56c6c !important;
    }

    .unActive-btn {
      color: #606266 !important;

      &:hover {
        color: #1890ff !important;
      }
    }

    .center-header-right {
      position: absolute;
      right: 15px;
      top: 0;
      display: flex;
      align-items: center;
      height: 42px;
    }
  }

  .center-box {
    position: relative;
    width: 100%;
    // height: calc(100% - 42px);
    box-sizing: border-box;
    // overflow: hidden;
    padding-bottom: 60px;
  }

  .el-scrollbar {
    height: 100%;
    overflow: hidden;

    .el-scrollbar__wrap {
      overflow-x: auto;
    }

    .el-scrollbar__view {
      overflow-x: hidden;
    }
  }

  .question-item {
    margin-bottom: 10px !important;
    width: 100%;
    border: 1px solid #409eff;
    padding: 10px;
  }
}

.right-board {
  width: 340px;
  position: absolute;
  right: 0;
  top: 0;
  padding-top: 3px;
  height: 100%;
  background: #fff;
  border-radius: 4px;
  padding: 0 24px;

  .right-header {
    position: relative;
    height: 42px;
    text-align: center;
    padding: 0 15px;
    box-sizing: border-box;
    // border-bottom: 1px solid #dcdfe6;

    .title-txt {
      font-size: 16px;
      float: left;
      padding: 13px 0;

      &::before {
        content: " ";
        width: 4px;
        height: 14px;
        background: #409eff;
        position: absolute;
        left: 0;
        right: 0;
        top: 13px;
        z-index: 2;
      }
    }

    .delete-btn {
      color: #f56c6c !important;
    }

    .unActive-btn {
      color: #606266 !important;

      &:hover {
        color: #1890ff !important;
      }
    }

    .right-header-right {
      position: absolute;
      right: 15px;
      top: 0;
      display: flex;
      align-items: center;
      height: 42px;
    }

    .right-tabs {
      .el-tabs__header {
        margin-bottom: 0 !important;
      }

      .el-tabs__item {
        width: 33.33%;
        text-align: center;
      }

      .el-tabs__nav {
        width: 100%;
      }
    }
  }

  .right-box {
    position: relative;
    width: 100%;
    height: calc(100% - 42px);
    box-sizing: border-box;
    overflow: hidden;
  }

  .el-scrollbar {
    height: 100%;
    overflow: hidden;

    .el-scrollbar__wrap {
      overflow-x: auto;
    }

    .el-scrollbar__view {
      overflow-x: hidden;
    }
  }
}

.empty-info {
  position: absolute;
  top: 20%;
  left: calc(50% - 250px);

  .empty-img {
    width: 500px;
    height: 500px;
  }
}
